<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '出库单详情',
    custom: true,
    // 'app-plus': {
    //   titleNView: {
    //     buttons: [
    //       {
    //         type: 'menu',
    //         color: '#000',
    //       },
    //     ],
    //   },
    // },
  },
}
</route>
<template>
  <Loyout class="outorder-detail-page" bgc="#F3F8FE">
    <view class="outorder-detail-box flex flex-column">
      <wd-form ref="form" :model="outFormdata">
        <wd-cell-group border>
          <wd-input
            type="text"
            v-model="outFormdata.out_order_no"
            label="单号"
            prop="out_order_no"
            suffix-icon="list"
            readonly
          />
        </wd-cell-group>
      </wd-form>
      <scroll-view class="flex1 pt-20" scroll-y>
        <wd-card v-for="item in outList" :key="item.qrcode">
          <view class="flex1 flex-row">
            <view class="flex1 flex-row flex-align-center">
              {{ item.qrcode }}
            </view>
            <view class="flex-align-center">
              <wd-checkbox v-model="item.checked" shape="square"></wd-checkbox>
            </view>
          </view>
        </wd-card>
      </scroll-view>
    </view>
    <!-- <wd-icon name="circle1" size="22px"></wd-icon> -->
    <!-- <wd-icon name="circle1" size="22px" color="#0083ff"></wd-icon> -->
    <template #footer>
      <wd-button class="flex1 ml-20" size="large" @click="deleteItems">删除</wd-button>
    </template>
  </Loyout>
</template>

<script lang="ts" setup>
import Loyout from '@/layouts/index.vue'
import { GoodsType, OrderType, OutOrderStatus } from '@/enum'
import OutSqlLite, { OutorderTable } from '@/utils/out-sqlite'
import OutGoodsSqlLite, { OutorderGoodsTable } from '@/utils/out-goods-sqlite'
import { useToast } from 'wot-design-uni'

const Toast = useToast()

const outList = ref([])

let outFormdata = reactive<OutorderTable>({
  out_order_no: '',
  org_code: '',
  goods_type: GoodsType.NORMAL,
  order_type: OrderType.OUT,
  create_at: '',
  status: OutOrderStatus.UNEXPORT,
  delete_flag: '0',
})

const outGoodsFormdata = reactive<OutorderGoodsTable>({
  out_order_no: '',
  org_code: '',
  qrcode: '',
  create_at: '',
  delete_flag: '0',
})

onLoad(async (options) => {
  console.log('options', options)
  if (options.out_order_no) {
    const data = await OutSqlLite.search({ out_order_no: options.out_order_no })
    console.log('data', data)
    outFormdata = Object.assign(outFormdata, data[0])
    outGoodsFormdata.out_order_no = outFormdata.out_order_no
    outGoodsFormdata.org_code = outFormdata.org_code
    console.log('outFormdata', outFormdata)
    console.log('outGoodsFormdata', outGoodsFormdata)
    getOutItem()
  }
})

const getOutItem = async () => {
  const data = await OutGoodsSqlLite.search(
    { out_order_no: outFormdata.out_order_no },
    { pageNum: 1, pageSize: 10000 },
  )
  console.log('data', data)
  outList.value = data
}

const deleteItems = async () => {
  const list = outList.value.filter((item) => item.checked)
  if (!list.length) {
    return Toast.error('请选择要删除的项')
  }
  await OutGoodsSqlLite.delete(list)
  Toast.success('删除成功')
  getOutItem()
}
</script>

<style lang="scss">
.outorder-detail-page {
  .outorder-detail-box {
    overflow-y: auto;
  }
}
</style>
